<template>
    <div class="keyWorkAreaWrap">
          <div class="workWrap">
            <div class="work" >
                <button @click="pressKey('+')">+</button>
            </div>
            <div class="work" >
                <button @click="pressKey('-')">-</button>
            </div>
            <div class="work" >
               <button @click="pressKey('*')">*</button>
            </div>
            <div class="work" >
                <button @click="pressKey('/')">/</button>
            </div>
       </div>
    </div>
</template>

<style lang="less" scoped>
    .keyWorkAreaWrap{
        border:5px solid #eee;
        padding:10px;
        .workWrap{
            .work{
                flex:1;
                margin-top:10px;
                button{
                    width:150px;
                    height:50px;     
                    border:none;
                    outline:none;
                    box-shadow:3px 0 3px 0 #000 inset;
                    background:#fff;
                    border-radius:10px;
                    font-weight:800;
                    font-size:20px;
                }
            }
        }
    }

</style>
<script lang="ts">


// import ReadWorkName from '@/types/ReadWorkName'
import {Component,Vue } from 'vue-property-decorator'
import HelperFuc from '@/types/HelperFuc'
@Component({
    components: {

    }
})

@Component
export default class KeyWorkAreaWrap extends Vue{

     pressKey(val:string):void{

         this.$store.commit("updateOperator",val)
         
         const helperFuc   = new HelperFuc()
         
         if(!helperFuc.checkIsAddStr(val))
         this.$store.commit("updateCurrentTotalStr",val) 
     }
  
}


</script>
